<template>
  <div class="container">

      <router-link :to="{path:'/gallery/detail', query:{post_data:item}}" v-for="(item,i) in posts"  :key="i">
        <div class="post" :style='{background:"url("+item.images[0]+")",backgroundSize: 330+"px", backgroundRepeat:"no-repeat"}'>
            <div class="content">
                <p class="title">{{item.post_title}}</p>
                <p class="summary">{{item.summary}}</p>
            </div>
        </div>
      </router-link>

      <div class="loading" v-if="!loaded">
           <h2>加载中,等一小下</h2>
           <div class="rect"></div>
      </div>
      
      <div class="warning">
        <h2>{{warning}}</h2>
      </div>        

  </div>
</template>

<script>
import { constants } from 'crypto';
export default{
    data(){
        return{
            posts:[],
            warning:'',
            loaded:false,
        }
    },    
    mounted:function(){
        this.$store.commit('setTitle','home');
        this.$store.commit('switchIsOriginPath',true);
        this.getUserPosts();        
    },
    methods:{
        getUserPosts(){
            var msg={user_name:this.$store.state.login_data.user_name};
            this.$http.get(this.$store.state.server_home_url+'/userhome',{params:msg}).then((res) => {
                if(res.body.data.length==0){
                    this.warning='已无更多';
                }
                
                this.posts=res.body.data;
                this.loaded=true;
            },(err) => {
                console.log(err);
            })            
        }
    }
}
</script>


<style lang="scss" scoped>
    .container{
        margin-top:25%;

        .post{
            margin: 35px auto;
            padding-top:100px;
            border-radius: 10px 10px;
            width:290px;
            height: 80px;
            box-shadow: black 8px 8px 8px;
            .content{
                background: rgba($color: #000000, $alpha: 0.5);
                padding: 5px 4% 0px 4%;
                width: 92%;
                height: 75px;
                overflow: hidden;
                border-radius: 0px 0px 10px 10px;

                p{  
                    word-wrap: break-word;
                    margin:0;
                    padding:0;
                    color:white;

                }
                .title{
                    font-size: 15px;
                }
                .summary{
                    font-size: 10px;
                }
            }
        }
        .loading{
            h2{
                text-align: center;
                color:green;
            }
            @keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }

            @-moz-keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }

            @-webkit-keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }

            @-o-keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }            
            .rect{
                width:35px;
                height:35px;
                background: greenyellow;
                animation: myfirst 2s infinite;
                -moz-animation: myfirst 2s infinite;	/* Firefox */
                -webkit-animation: myfirst 2s infinite;	/* Safari 和 Chrome */
                -o-animation: myfirst 2s infinite;	/* Opera */
            }         
        }
        .warning{
            h2{
                text-align: center;
                color:red;
            }
        } 
        
    }
</style>